<script setup lang="ts">
import { 
  Document, Monitor, Setting, Files, 
  Picture, VideoPlay, Microphone,
  Box, FolderOpened, Link
} from '@element-plus/icons-vue';
import type { Shortcut } from '../types';

interface Props {
  shortcut: Shortcut;
  isSelected: boolean;
  isLaunching?: boolean;
}

interface Emits {
  (e: 'click'): void;
  (e: 'doubleClick'): void;
}

defineProps<Props>();
defineEmits<Emits>();

// 根据图标类型获取对应的图标组件
function getIconComponent(iconType: string) {
  switch (iconType) {
    case 'application':
      return Monitor;
    case 'installer':
      return Setting;
    case 'script':
      return Files;
    case 'document':
      return Document;
    case 'pdf':
      return Document;
    case 'image':
      return Picture;
    case 'audio':
      return Microphone;
    case 'video':
      return VideoPlay;
    case 'archive':
      return Box;
    case 'shortcut':
      return Link;
    default:
      return FolderOpened;
  }
}

// 检查是否为base64编码的图标
function isBase64Icon(icon: string | undefined): boolean {
  if (!icon) return false;
  // 检查是否为base64编码（通常以字母数字和+/=字符组成，长度较长）
  return icon.length > 20 && /^[A-Za-z0-9+/=]+$/.test(icon);
}

// 检查base64数据是否为SVG格式
function isSVGIcon(icon: string | undefined): boolean {
  if (!icon) return false;
  try {
    const decoded = atob(icon);
    return decoded.includes('<svg') || decoded.includes('<?xml');
  } catch (error) {
    return false;
  }
}

// 解码base64图标（仅用于SVG格式）
function decodeBase64Icon(icon: string | undefined): string {
  if (!icon) return '';
  try {
    // 直接解码base64为字符串（SVG是文本格式）
    return atob(icon);
  } catch (error) {
    console.error('解码图标失败:', error);
    return '';
  }
}
</script>

<template>
  <div 
    :class="['shortcut-item', { 'selected': isSelected, 'launching': isLaunching }]"
    @click="$emit('click')"
    @dblclick="$emit('doubleClick')"
  >
    <div class="shortcut-icon">
      <!-- 如果有base64编码的图标数据 -->
      <div v-if="isBase64Icon(shortcut.icon)" class="custom-icon">
        <!-- 检查是否为SVG数据 -->
        <div v-if="isSVGIcon(shortcut.icon)" v-html="decodeBase64Icon(shortcut.icon)"></div>
        <!-- 否则作为PNG图片显示 -->
        <img v-else :src="`data:image/png;base64,${shortcut.icon}`" class="app-icon" alt="图标" />
      </div>
      <!-- 否则使用默认图标 -->
      <el-icon v-else size="40" :class="`icon-${shortcut.icon || 'default'}`">
        <component :is="getIconComponent(shortcut.icon || 'file')" />
      </el-icon>
    </div>
    <div class="shortcut-name">{{ shortcut.name }}</div>
  </div>
</template>

<style lang="scss" scoped>
.shortcut-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  padding: 12px;
  border-radius: 8px;
  transition: all 0.2s ease;
  user-select: none;
  width: 85px;
  box-sizing: border-box;
  border: 2px solid transparent; // 预留边框空间，避免选中时尺寸变化
  
  &:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: scale(1.05);
  }
  
  &:active {
    transform: scale(0.95);
  }
  
  &.selected {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.6); // 只改变边框颜色，不改变尺寸
    transform: scale(1.05);
  }
  
  &.launching {
    background: rgba(255, 255, 255, 0.4);
    border-color: rgba(64, 158, 255, 0.8);
    transform: scale(1.1);
    animation: launching-pulse 0.6s ease-in-out infinite alternate;
    
    .shortcut-icon {
      animation: launching-spin 1s linear infinite;
      box-shadow: 0 0 20px rgba(64, 158, 255, 0.6);
    }
    
    .shortcut-name {
      color: rgba(255, 255, 255, 0.9);
    }
  }
}

.shortcut-icon {
  display: flex; 
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 12px;
  color: white;
  margin-bottom: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: all 0.2s ease;
  
  .custom-icon {
    width: 48px;
    height: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
    
    svg {
      width: 100%;
      height: 100%;
      max-width: 40px;
      max-height: 40px;
    }
  }
  
  .shortcut-item:hover & {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  }
  
  .icon-application {
    color: #409EFF;
  }
  
  .icon-installer {
    color: #67C23A;
  }
  
  .icon-script {
    color: #E6A23C;
  }
  
  .icon-document {
    color: #909399;
  }
  
  .icon-pdf {
    color: #F56C6C;
  }
  
  .icon-image {
    color: #E6A23C;
  }
  
  .icon-audio {
    color: #67C23A;
  }
  
  .icon-video {
    color: #409EFF;
  }
  
  .icon-archive {
    color: #909399;
  }
  
  .icon-shortcut {
    color: #F56C6C;
  }
  
  .icon-default {
    color: rgba(255, 255, 255, 0.9);
  }
  
  .app-icon {
    width: 40px;
    height: 40px;
    object-fit: contain;
  }
}

.shortcut-name {
  font-size: 12px;
  font-weight: 500;
  color: white;
  text-align: center;
  line-height: 1.2;
  word-wrap: break-word;
  max-width: 100%;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  
  // 限制显示行数
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

// 启动动画关键帧
@keyframes launching-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(64, 158, 255, 0.4);
  }
  100% {
    box-shadow: 0 0 0 8px rgba(64, 158, 255, 0);
  }
}

@keyframes launching-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>